<template>
	<view class="fl-s-s p-30 relative pbox">
		<view class="br-20 bg-ff w-1 p-30 fl-s-s">
			<text class="c-33 fs-28 bold">请选择电工类型</text>
			<view class="w-1 fr-b-c m-t-20">
				<view class="fr-c" @click="(cur=index,authobj.electritype = types[cur])"
					:class="cur==index?'tboxact':'tbox'" v-for="(item,index) in types" :key="index">
					{{item}}
				</view>
			</view>
		</view>
		<view class="br-20 bg-ff w-1 p-30 fl-s-s m-t-20">
			<text class="c-33 fs-26">请拍摄本人真实身份证照片，并保持完整和清晰，平台将保障您的信息安全，照片仅用于身份验证</text>
			<view class="w-1 fr-b-s m-t-20">
				<view class="fl-s-c">
					<up-upload :sizeType="['compressed']" :fileList="fileList2" @afterRead="afterRead"
						@delete="deletePic" name="2" :multiple="false" width="300rpx" height="178rpx" :maxCount="1">
						<image style="width: 300rpx; height: 178rpx;" :src="$path + '/login/z2.png'" mode="aspectFill">
						</image>
					</up-upload>
					<text class="c-33 fs-28 m-t-10">身份证-人像面</text>
				</view>
				<view class="fl-s-c">
					<up-upload :sizeType="['compressed']" :fileList="fileList3" @afterRead="afterRead"
						@delete="deletePic" name="3" :multiple="false" width="300rpx" height="178rpx" :maxCount="1">
						<image style="width: 300rpx; height: 178rpx;" :src="$path + '/login/z3.png'" mode="aspectFill">
						</image>
					</up-upload>
					<text class="c-33 fs-28 m-t-10">身份证-国徽面</text>
				</view>
			</view>
		</view>

		<view class="br-20 bg-ff w-1 p-30 fl-s-s m-t-20">
			<text class="c-33 fs-28 bold">请上传{{types[cur]}}证件照片（正面）</text>
			<view class="w-1 fl-s-s m-t-20">
				<up-upload :sizeType="['compressed']" :fileList="fileList1" @afterRead="afterRead" @delete="deletePic"
					name="1" :multiple="false" width="136rpx" height="136rpx" :maxCount="1">
					<view class="fl-c br-20" style="width: 136rpx; height: 136rpx; background: #f3f3f3;">
						<image :src="$path + '/tab1/camera.png'" style="width: 51rpx; height: 49rpx;" mode=""></image>
						<text class="fs-20 c-77">上传图片</text>
					</view>
				</up-upload>
			</view>
		</view>
		<view class="br-20 bg-ff w-1 p-30 fl-s-s m-t-20">
			<text class="c-33 fs-28 bold">请上传{{types[cur]}}证件照片（背面）</text>
			<view class="w-1 fl-s-s m-t-20">
				<up-upload :sizeType="['compressed']" :fileList="fileList8" @afterRead="afterRead" @delete="deletePic"
					name="8" :multiple="false" width="136rpx" height="136rpx" :maxCount="1">
					<view class="fl-c br-20" style="width: 136rpx; height: 136rpx; background: #f3f3f3;">
						<image :src="$path + '/tab1/camera.png'" style="width: 51rpx; height: 49rpx;" mode=""></image>
						<text class="fs-20 c-77">上传图片</text>
					</view>
				</up-upload>
			</view>
		</view>
		<view class="w-1 m-t-30 fr-c">
			<text class="c-99 fs-24" @click="tohome" style="text-decoration: underline;">跳过 暂不认证</text>
		</view>
		<view class="" style="min-height: 200rpx;opacity: 0;">
			1
		</view>
		<!-- <view class="flex-1"></view> -->
		<view class="w-1 iphonex bg-ff">
			<view class="w-1 p-30">
				<view class="big-btn c-ff fr-c fs-30" @click="sub">确认并提交</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		baseUrl
	} from '@/utils/base.js'

	// 实名表单
	const authobj = reactive({
		zcardimg: '',
		bcardimg: '',
		yyzzimg: '',
		dgbackimg: '',
		electritype: "高压"
	})

	const back = ref(0)
	onLoad(o => {
		back.value = o.back || 0
	})

	const types = ref(['高压', '低压'])
	const cur = ref(0)

	function subauth() {
		uni.$post({
			url: "/api/Realauth/starfRealerauth",
			data: authobj
		}).then(res => {
			// uni.navigateTo({
			// 	url: './Result'
			// })
			getApp().tt('提交成功', 'success')

			if (back.value == 1) {
				uni.$delayBack()
			} else {
				setTimeout(() => {
					tohome()
				}, 1500)
			}
		})
	}

	function sub() {
		let arr = Object.values(authobj).map(i => i = String(i));
		if (arr.includes('')) return uni.$u.toast('请完善认证信息');
		subauth()
	}



	function tohome() {
		uni.switchTab({
			url: '/pages/index/index'
		})
	}



	const fileList1 = ref([]);
	const fileList8 = ref([]);
	watch(fileList1, val => {
		console.log('图片val', val)
		let arr = []
		val.map(item => {
			if (item.status == 'success') {
				arr.push('/uploads/' + item.url.split('/uploads/')[1])
			}
		})
		authobj.yyzzimg = arr.join(',')
	}, {
		deep: true
	})
	watch(fileList8, val => {
		console.log('图片val', val)
		let arr = []
		val.map(item => {
			if (item.status == 'success') {
				arr.push('/uploads/' + item.url.split('/uploads/')[1])
			}
		})
		authobj.dgbackimg = arr.join(',')
	}, {
		deep: true
	})
	const fileList2 = ref([]);
	watch(fileList2, val => {
		console.log('图片val', val)
		let arr = []
		val.map(item => {
			if (item.status == 'success') {
				arr.push('/uploads/' + item.url.split('/uploads/')[1])
			}
		})
		authobj.zcardimg = arr.join(',')
	}, {
		deep: true
	})
	const fileList3 = ref([]);
	watch(fileList3, val => {
		console.log('图片val', val)
		let arr = []
		val.map(item => {
			if (item.status == 'success') {
				arr.push('/uploads/' + item.url.split('/uploads/')[1])
			}
		})
		authobj.bcardimg = arr.join(',')
	}, {
		deep: true
	})

	// 删除图片
	const deletePic = (event) => {
		const arr = ref([]);
		switch (event.name * 1) {
			case 1:
				arr.value = fileList1.value;
				break;
			case 2:
				arr.value = fileList2.value;
				break;
			case 8:
				arr.value = fileList8.value;
				break;
			case 3:
				arr.value = fileList3.value;
				break;
		}
		arr.value.splice(event.index, 1);
	};
	// 新增图片
	const afterRead = async (event) => {
		const arr = ref([]);
		switch (event.name * 1) {
			case 1:
				arr.value = fileList1.value;
				break;
			case 2:
				arr.value = fileList2.value;
				break;
			case 8:
				arr.value = fileList8.value;
				break;
			case 3:
				arr.value = fileList3.value;
				break;
		}
		// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
		let lists = [].concat(event.file);
		let fileListLen = arr.value.length;
		lists.map((item) => {
			arr.value.push({
				...item,
				status: 'uploading',
				message: '上传中',
			});
		});
		for (let i = 0; i < lists.length; i++) {
			const result = await uploadFilePromise(lists[i].url);
			let item = arr.value[fileListLen];
			arr.value.splice(fileListLen, 1, {
				...item,
				status: 'success',
				message: '',
				url: result,
			});
			fileListLen++;
		}
	};

	const uploadFilePromise = (url) => {
		return new Promise((resolve, reject) => {
			let a = uni.uploadFile({
				url: baseUrl + '/api/Common/upload', // 仅为示例，非真实的接口地址
				filePath: url,
				name: 'file',
				header: {
					token: uni.getStorageSync('user').token
				},
				success: (res) => {
					setTimeout(() => {
						resolve(JSON.parse(res.data).data.fullurl)
					}, 1000);
				},
			});
		});
	};
</script>

<style>
	page {
		background: #f1f6f7;
	}

	.ibox {
		width: 686rpx;
		height: 88rpx;
		/* background: #f8f8f8; */
		/* border-radius: 44rpx 44rpx 44rpx 44rpx; */
		padding: 25rpx 0rpx;
		border-bottom: 2rpx solid #F1F1F1;
		margin-top: 38rpx;
	}

	.kuang {
		width: 25rpx;
		height: 25rpx;
		border: 2rpx solid #013591;
	}

	.w-132 {
		width: 132rpx;
	}


	.pbox {
		height: 100vh;
		/* #ifdef H5 */
		height: calc(100vh - 44px);
		/* #endif */
	}

	.codebtn {
		min-width: 146rpx;
		padding: 0 24rpx;
		height: 44rpx;
		background: #a9d8bd;
		border-radius: 22rpx 22rpx 22rpx 22rpx;
	}


	.qybox {
		width: 690rpx;
		height: 92rpx;
		background: #F6F6F6;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}

	.tbox {
		width: 296rpx;
		height: 96rpx;
		background: #E9E9E9;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		font-size: 28rpx;
		color: #3E3E3E;
	}

	.tboxact {
		font-size: 28rpx;
		color: #FFFFFF;
		width: 296rpx;
		height: 96rpx;
		background: #01796D;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
	}
</style>